<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/cart.css" />
		<link rel="stylesheet" href="css/orderadd.css" />
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<div class="littletop"></div>
				<div class="navtitle">
					<div class="title">
						<a href="##" class="logo">
							<img src="img/logo.png" />
						</a>
						<div class="titlelist">
							<ul>
								<li>
									<a href="##">首页</a>
								</li>
								<li>
									<a href="##">手机数码</a>
								</li>
								<li>
									<a href="##">电脑办公</a>
								</li>
								<li>
									<a href="##">衣服用品</a>
								</li>
								<li>
									<a href="##">购物车</a>
								</li>
							</ul>
						</div>
						<div class="tatoo">
							<ul>
								<li>
									<a href="##" class="search">
										<i class="icon-search"></i>
										<input type="text" value="搜索" name="search" />
									</a>
								</li>
								<li>
									<a href="##" class="login">
										<i class="icon-login"></i>
										<span>登录</span>
									</a>
								</li>
								<li>
									<a href="##" class="cart">
										<i class="icon-cart"></i>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="container">
			<div class="section">
				<ul>
					<li>
						<i style="background-color: #1428a0;">1</i>
						<a style="color: #1428a0;">查看购物车</a>
					</li>
					<li>
						<i  style="background-color: #1428a0;">2</i>
						<a style="color: #1428a0;">确认订单信息</a>
					</li>
					<li>
						<i>3</i>
						<a>提交并付款</a>
					</li>
				</ul>
			</div>
			<div class="checkout">
				<span class="checkouttitle">订单结算</span>
				<div class="checkinfo">
					<div class="checkleft" style="float: left;">
						<div class="group">
							<div class="titlebg">收货信息</div>
							<div class="rowlist">
								<div class="formgroup">
									<label>收货人</label>
										<div class="forminput">
											<input type="text" name="username" placeholder="">
									</div>
								</div>
							</div>
							<div class="rowlist">
								<div class="formgroup">
									<label>联系电话</label>
										<div class="forminput">
											<input type="text" name="phonenumber" placeholder="">
									</div>
								</div>
							</div>
							<div class="address">
								<div class="formgroup">
								<label>收货地址</label>
								<div class="selects">
									<div class="shengfen">
											<a class="citytext">
											    <span id="provinceStr" style="margin-left: 10px;">请选择省</span>
											</a>
											<a>
												<i class="caret"></i>
											</a>
											<div class="submenu" style="display: none;">
									        <div class="viewport">
									            <ul class="citycontent">
									            	<li class="selected">
									            		<a>请选择省</a>
									            	</li>
									            	<li>
									            		<a>北京</a>
									            	</li>
									            	<li>
									            		<a>天津</a>
									            	</li>
									            	<li>
									            		<a>河北省</a>
									            	</li>
									            	<li>
									            		<a>山西省</a>
									            	</li>
									            	<li>
									            		<a>内蒙古自治区</a>
									            	</li>
									            	<li>
									            		<a>辽宁省</a>
									            	</li>
									            	<li>
									            		<a>吉林省</a>
									            	</li>
									            	<li>
									            		<a>黑龙江省</a>
									            	</li>
									            	<li>
									            		<a>上海</a>
									            	</li>
									        </div>
									    </div>
									</div>
									<div class="city">
										<a class="citytext">
											    <span id="provinceStr" style="margin-left: 10px;">请选择市</span>
											</a>
											<a>
												<i class="caret"></i>
											</a>
											<div class="submenu" style="display: none;">
									        <div class="viewport">
									            <ul class="citycontent">
									            	<li class="selected">
									            		<a>请选择市</a>
									            	</li>
									            	<li>
									            		<a>北京</a>
									            	</li>
									            	<li>
									            		<a>天津</a>
									            	</li>
									            	<li>
									            		<a>河北省</a>
									            	</li>
									            	<li>
									            		<a>山西省</a>
									            	</li>
									            	<li>
									            		<a>内蒙古自治区</a>
									            	</li>
									            	<li>
									            		<a>辽宁省</a>
									            	</li>
									            	<li>
									            		<a>吉林省</a>
									            	</li>
									            	<li>
									            		<a>黑龙江省</a>
									            	</li>
									            	<li>
									            		<a>上海</a>
									            	</li>
									        </div>
									    </div>
									</div>
									<div class="qu">
										<a class="citytext">
											    <span id="provinceStr" style="margin-left: 10px;">请选择区</span>
											</a>
											<a>
												<i class="caret"></i>
											</a>
											<div class="submenu" style="display: none;">
									        <div class="viewport">
									            <ul class="citycontent">
									            	<li class="selected">
									            		<a>请选择市</a>
									            	</li>
									            	<li>
									            		<a>北京</a>
									            	</li>
									            	<li>
									            		<a>天津</a>
									            	</li>
									            	<li>
									            		<a>河北省</a>
									            	</li>
									            	<li>
									            		<a>山西省</a>
									            	</li>
									            	<li>
									            		<a>内蒙古自治区</a>
									            	</li>
									            	<li>
									            		<a>辽宁省</a>
									            	</li>
									            	<li>
									            		<a>吉林省</a>
									            	</li>
									            	<li>
									            		<a>黑龙江省</a>
									            	</li>
									            	<li>
									            		<a>上海</a>
									            	</li>
									        </div>
									    </div>
									</div>
									<div class="more">
											<div class="forminput">
												<input id="contactAddress" type="text" placeholder="详细街道地址">
												<span class="msg-block">
													<span></span>
											    </span>
										    </div>
									    </div>
								    </div>
								</div>
							</div>
						</div>
						<div class="pay">
							<div class="titlebg">支付方式</div>
							<div class="payway">
								<div class="payment">
									<ul>
										<li>
											<a class="zoo">
												<span>平台支付</span>
											</a>
											<div class="menu" style="display: none;">
												<div class="paycol">
													<a class="radio"></a>
												    <i value="支付宝支付"></i>
												</div>
							                </div>
					                    </li>
										<li>
											<a class="zoo">
												<span>信用卡快捷支付</span>
											</a>
										</li>
										<li>
											<a class="zoo">
												<span>网银支付</span>
											</a>
											<div class="menu1" style="display:none;margin-left: -290px;">
												<div class="paycol1">
													<a class="radio1"></a>
												    <i value="支付宝支付"></i>
												</div>
							                </div>
										</li>
										<li>
											<a class="zoo">
												<span>分期付款</span>
											</a>
											<div class="age" style="display: none;">
												<div class="stages">
											        <a>
											        	<span>3期</span>
											        </a>
											        <p>
											        	<b>每期约￥</b>566.33
											        </p>
											        <p>手续费约￥0.00</p>
											        <p>共约￥1,699.00</p>
										        </div>
												<div class="stages">
											        <a>
											        	<span>6期</span>
											        </a>
											        <p>
											        	<b>每期约￥</b>283.16
											        </p>
											        <p>手续费约￥0.00</p>
											        <p>共约￥1,699.00</p>
										        </div>
											</div>
										</li>
									</ul>
									<div class="card" style="display: none;">
										<ul>
											<li>
												<a class="zsradio"></a>
												<i></i>
											</li>
											<li>
												<a class="gdradio"></a>
												<i></i>
											</li>
											<li>
												<a class="gsradio"></a>
												<i></i>
											</li>
											<li>
												<a class="jsradio"></a>
												<i></i>
											</li>
											<li>
												<a class="nyradio"></a>
												<i></i>
											</li>
											<li>
												<a class="zgradio"></a>
												<i></i>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="checkright">
				<div class="titlebgright">商品清单</div>
				<div class="detailed">
					<div class="table">
						<ul style="border-bottom: 1px solid #f1f1f1;">
							<li>
								<span>商品</span>
								<span>数量</span>
								<span>单价</span>
							</li>
						</ul>
						</div>
						<div class="orderpart">
							<ul>
								<li style="padding: 7px 0 0 57px;">
									<img src="img/phone.jpg" />
									<p style="margin: 4px 0 0 -20px;">花木蓝 6GB RAM<br> 64GB ROM 公开版 </p>
								</li>
								<li style="margin: 4px 0 0 57px;">
									<p>1</p>
								</li>
								<li style="margin: 4px 0 0 86px;">
									<p>￥1,799.00</p>
								</li>
							</ul>
							<ul>
								<li style="padding: 7px 0 0 57px;">
									<img src="img/zhijia.jpg" />
									<p style="margin: 4px 0 0 -5px;">手机充电支架<br> (赠品) </p>
								</li>
								<li style="margin: 4px 0 0 70px;">
									<p>1</p>
								</li>
								<li style="margin: 4px 0 0 86px;">
									<p>￥0.00</p>
								</li>
							</ul>
							<ul>
								<li style="padding: 7px 0 0 57px;">
									<img src="img/gtx.jpg" />
									<p style="margin: 4px 0 0 -20px;">钢铁侠10000mAh<br> 移动电源（赠品） </p>
								</li>
								<li style="margin: 4px 0 0 57px;">
									<p>1</p>
								</li>
								<li style="margin: 4px 0 0 86px;">
									<p>￥0.00</p>
								</li>
							</ul>
						</div>
						<div class="checkoutnums">
							<p>商品金额
								<span>￥1,799.00</span>
							</p>
							<p>优惠金额
								<span>￥100.00</span>
							</p>
							<p>运费
								<span style="margin-left: 217px;">￥0.00</span>
							</p>
						</div>
					</div>
					<div class="say">
							<p class="mail">
								<label>输入邮箱以接收邮件通知，查询订单状态</label>
							</p>
							<input type="text" placeholder="请输入邮箱地址">
							<p>
								<span id="red">*我接受</span>
								<a href="##" style="color: #337AB7;">三星网上商城使用条款</a>
								<span>
									<span>请您详细阅读并保留条款内容（保留方式不限，需含条款页面网址、保留时间等）</span>
								</span>
								<a class="btnsubmit">提交订单</a>
							</p>
						</div>
				</div>
		</div>
		
		<div class="footer">
			<div class="footertop">
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">我的三星</a>
					</li>
					<li>
						<a href="##">我的订单</a>
					</li>
					<li>
						<a href="##">我的评分</a>
					</li>
					<li>
						<a href="##">优惠券</a>
					</li>
					<li>
						<a href="##">个人资料</a>
					</li>
					<li>
						<a href="##">收货地点</a>
					</li>
					<li>
						<a href="##">售后网点查询</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">网上购物商城</a>
					</li>
					<li>
						<a href="##">购物指南</a>
					</li>
					<li>
						<a href="##">支付方式</a>
					</li>
					<li>
						<a href="##">订单及发票</a>
					</li>
					<li>
						<a href="##">关于配送</a>
					</li>
					<li>
						<a href="##">售后服务</a>
					</li>
					<li>
						<a href="##">会员及优惠</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">服务支持</a>
					</li>
					<li>
						<a href="##">常见问题</a>
					</li>
					<li>
						<a href="##">关于商城</a>
					</li>
					<li>
						<a href="##">关于三星</a>
					</li>
					<li>
						<a href="##">联系我们</a>
					</li>
					<li>
						<a href="##">使用条款</a>
					</li>
					<li>
						<a href="##">加为书签</a>
					</li>
				</ul> 
				<div class="way">
				<div class="sharing">官方分享</div>
			    <div class="sharingbtn">
				    <a href="##" class="weibo"></a>
				    <a href="##" class="wechat"></a>
			</div>
			</div>
			</div>
		</div>
	</body>
</html>
